<!-- <template>
	<view class="container">
		<template v-if="type == 1">
			<view class="card-box"
				:style="{transform: 'translate3d(0,40rpx,-480px) rotateX(10deg) rotateY('+ num +'deg)'}"
				@touchmove="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend">
				<view class="card" v-for="(item,index) in imgList" :key="index"
					:style="{transform: 'rotateY('+ item.num +'deg) translateZ(210px)'}">
					<image :src="item.img" @tap="changeIndex(index)" mode="aspectFill"></image>
					<image :src="item.icon" mode="aspectFill" class="icon_prize"></image>
				</view>
			</view>
			<view class="mask_box">
				<view class="mask_con">

				</view>
			</view>
			<image :src="url + '/static/newImg/lookall.png'" mode="aspectFill" class="lookall" @click="toDetail">
			</image>
		</template>


		<template v-else>
			<view class="card-box"
				:style="{transform: 'translate3d(0,40rpx,-480px) rotateX(10deg) rotateY('+ num +'deg)'}"
				@touchmove="handletouchmove" @touchstart="handletouchstart" @touchend="handletouchend">
				<view class="card" v-for="(item,index) in imgList" :key="index"
					:style="{transform: 'rotateY('+ item.num +'deg) translateZ(210px)'}">
					<image :src="item.img" @tap="changeIndex(index)" mode="aspectFill"></image>
					<image :src="item.icon" mode="aspectFill" class="icon_prize"></image>
				</view>
			</view>
			<view class="mask_box">
				<view class="mask_con">

				</view>
			</view>
			<image :src="url + '/static/newImg/lookall.png'" mode="aspectFill" class="lookall" @click="toDetail">
			</image>
		</template>


	</view>
</template>
<script>
	export default {
		data() {
			return {
				flag: 0, //1向左滑动,2向右滑动,3向上滑动 4向下滑动
				text: '', //向哪里滑动
				lastX: 0,
				lastY: 0,
				index: 0,
				num: 0, //滑动数量
				timer: null,
				timer2: null,
				angleNum: 0, //旋转角度
				boxid: 0, // 轮播图bosid
				imgList: [],
				url: this.$configs.urls,
			}
		},
		mounted() {
			////console.log('timer', this.timer)
			if (this.timer) {
				clearTimeout(this.timer)
			}
		},
		beforeDestroy() {
			clearTimeout(this.timer)
		},
		props: ['swiperCurrent', 'type'],
		methods: {
			//跳转详情页面  查看全部商品
			toDetail() {
				this.$emit('goDetailInfo', true)
			},
			getList() {
				clearTimeout(this.timer)
				if (this.type == 1) {
					let data = {
						cat_id: 1
					}
					this.$Request.get(this.$api.index.defaultindex, data).then(res => {
						this.boxid = res.data.list[this.swiperCurrent].box_id
						this.getimgfun()
						setTimeout(() => {
							this.changeNum()
						}, 500)
					})
				} else {
					this.$Request.get(this.$api.index.defaultindex).then(res => {
						clearTimeout(this.timer)
						this.boxid = res.data.list[this.swiperCurrent].box_id
						this.getimgfun()
						setTimeout(() => {
							this.changeNum()
						}, 500)
					})
				}

			},
			// 获取图片的方法
			getimgfun() {
				let data = {
					box_id: this.boxid
				}
				this.$Request.get(this.$api.mhapi.index, data).then(res => {
					this.imgList = []
					let arr = []
					for (let i = 0; i <= 8; i++) {
						let imglist = {
							img: res.data.prize_list[i].carousel_icon,
							icon:res.data.prize_list[i].level_icon,
							num: 0
						}
						arr.push(imglist)
					}
					this.imgList.push(...arr)
					this.getAngleNum()
				})
			},
			getAngleNum() {
				let arrNew = []
				let num = 360 / this.imgList.length
				for (let i = 0; i <= this.imgList.length; i++) {
					arrNew.push(num * i)
				}
				this.imgList.forEach((item, index) => {
					item.num = arrNew[index]
				})
			},
			changeNum() {
				clearTimeout(this.timer)
				this.num += -0.3
				this.timer = setTimeout(() => {
					this.changeNum()
				}, 50)
			},
			//商品详情
			changeIndex(index) {
			},
			//滑动
			handletouchmove(event) {
				clearTimeout(this.timer)
				let currentX = event.changedTouches[0].pageX;
				let currentY = event.changedTouches[0].pageY;
				let tx = currentX - this.lastX;
				let ty = currentY - this.lastY;
				let text = '';
				this.mindex = -1;
				//左右方向滑动
				if (Math.abs(tx) > Math.abs(ty)) {
					if (tx < 0) {
						text = '向左滑动';
						this.flag = 1;
					} else if (tx > 0) {
						text = '向右滑动';
						this.flag = 2;
					}
				}
				//上下方向滑动
				else {
					if (ty < 0) {
						text = '向上滑动';
						this.flag = 3;
					} else if (ty > 0) {
						text = '向下滑动';
						this.flag = 4;
					}
				}
				//将当前坐标进行保存以进行下一次计算
				this.lastX = currentX;
				this.lastY = currentY;
				this.text = text;
				if (this.flag === 1) {
					this.num -= 1
				}
				if (this.flag === 2) {
					this.num += 1
				}
			},
			//
			handletouchstart(event) {
				clearTimeout(this.timer)
				this.lastX = event.changedTouches[0].pageX;
				this.lastY = event.changedTouches[0].pageY;
			},
			//
			handletouchend(event) {
				this.flag = 0;
				this.text = '没有滑动';
				clearTimeout(this.timer)
				this.changeNum()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		perspective: 1000;
		width: 100%;
		position: relative;
		z-index: 10;
		height: 260rpx;

		@media screen and (min-width:320px) and (max-width:360px) {
			perspective: 470;
		}

		@media screen and (min-width:360px) and (max-width:375px) {
			perspective: 710;
		}
		
		@media (min-width:390px) {
			perspective: 860;
		}

		@media (min-width:428px) {
			perspective: 1100;
		}
	}

	.mask_box {
		position: absolute;
		width: 750rpx;
		height: 100rpx;
		left: 0;
		bottom: -10rpx;
		overflow: hidden;
	}

	.mask_con {
		position: absolute;
		top: 0;
		left: 14%;
		width: 553rpx;
		height: 110rpx;
		background-image: url("https://mh.qingfentool.vip/upload/image/20230103/4706d46f55470ccffe9e64779b9ce391.png");
		background-size: 100% 100%;
		background-position: top center;
		z-index: 2;
	}

	.card-box {
		margin: auto;
		width: 300rpx;
		transform-style: preserve-3d;
		animation: 1s;
	}

	.lookall {
		width: 192rpx;
		height: 44rpx;
		position: absolute;
		left: 38%;
		bottom: 26rpx;
		z-index: 5;
	}

	.card {
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		width: 160px;
		height: 120px;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		padding: 8rpx 20rpx;
		background-color: #607eaa;
		.icon_prize{
			    width: 98rpx;
			    height: 32rpx;
			    position: absolute;
			    top: 18rpx;
			    left: 30rpx;
			    z-index: 10;
		}
	}

	.card image {
		width: 100%;
		height: 100%;
		background-color: #ffffff;
		border-radius: 10rpx;
	}
</style>
 -->